<template>
    <div id="analysis">

    </div>
</template>
<script setup>
import { getCurrentInstance, ref, onMounted, reactive } from 'vue'
import http from "axios";
import axios from 'axios';
let internalInstance = getCurrentInstance();
let echarts = internalInstance.appContext.config.globalProperties.$echarts;
const chart1 = ref(null);
let newData = reactive([])
const renderLineChart = async () => {
    for (let i = 1; i <= 9; i++) {
        // ajax(i)
        setTimeout(() => {
            console.log('相机' + i);
            ajax(i)
        }, i * 100)
    }
    chart1.value = echarts.init(document.getElementById("analysis"));
    let options = {
        title: {
            text: '态势分析',
            colol: "#fff"
        },
        legend: {
            data: ['徘徊报警', '人员聚集报警']
        },
        xAxis: {
            type: 'category',
            data: ['熏华路中', '滨湖路', '西北停车场', '滨湖大道桥', '北停车场', '图书馆', '滨湖大道中', '昭亭南路南', '滨湖路口'],
            axisLabel: {
                rotate: 45
            }
        },
        yAxis: {
            type: 'value',
            label: {
                show: true,
                position: 'top'
            }
        },
        tooltip: {
            show: true
            // trigger: 'axis',
            // axisPointer: {
            //     type: 'shadow'
            // }
        },
        series: [
            {
                name: '徘徊报警',
                // data: [120, 200, 150, 80, 70, 110, 130, 90, 160],
                data: newData,
                type: 'bar'
            },
            {
                name: '人员聚集报警',
                // data: newData,
                data:[0,0,0,0,10],
                type: 'bar'
            }
        ]
    }
    setTimeout(() => {
        chart1.value.setOption(options)
    }, 2000)
}
const ajax = (num) => {
    http({
        //  /api/ptz/control/{deviceId}/{channelId}
        method: "post",
        url: `/sinlogin/userManage/selectbjto`,
        params: {
            num: num,
        },
        baseURL: "/abs",
    })
        .then((response) => {
            // if (response.status >= 200 || response.status < 400) {
            console.log("ok", response.data);
            newData.push(response.data)
            console.log(newData);
            // return response.data
        })
        .catch((error) => {
            console.log("获取失败", error);
        });
}

onMounted(() => {
    renderLineChart()
})
</script>
<style scoped>
#analysis {
    width: 100%;
    height: 100%;
    background-color: rgba(51, 50, 50);
}
</style>